<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">选择负责人</block>
		<block slot="right">
		<view class="" @tap="confimButton">
			确认
		</view>
		</block>
		</cu-custom>
		
		 <!-- 搜索框 -->
		    <div class="search-container margin-top">
		        <i class="cuIcon-search margin-left"></i>
		        <input
		            type="text"
		            search="search"
					placeholder="请输入搜索内容"
		            @confirm="handleSearch"
		            @input="handleInput"
		            class="search-input"
		        />
		    </div>

		<!-- 使用 scroll-view 包裹内容 -->
		<scroll-view class="scroll-view" scroll-y="true">
		  <view v-for="item in staffList">
			  <view class="contact-item" @tap.stop ="handleSelectFinish(item)">
				 <!-- 添加一个可选中的框 -->
				  <checkbox :class="item.states?'checked':''" value="item.states" :checked="item.states"  color="#FFCC33" style="transform:scale(0.7);  margin-left: 7px;" @tap.stop ="handleSelectFinish(item)"/>
			  
				  <!-- 图片元素，设置圆角和大小 -->
				  <image :src="item.avatar" class="avatar"></image>
			  
				  <!-- 文本元素，居中显示 -->
				  <view class="contact-text">{{ item.name }}</view>
			  </view>
		  </view>
		</scroll-view>
		
		
		<view class="button-wrapper">
		      <button class="confirm-button" @click="confimButton">确定</button>
		      <button class="cancel-button" @click="cancelButton">取消</button>
		    </view>
	</view>
</template>

<script>
	import common from 'common/common.js';
	import { times } from 'uview-ui/libs/function/digit';
	export default {
		
		data() {
			return {
				// 回显数据
				leader:[],
				ids:[],
				staffList:[],
				allStaff: [],
				selectBtnText: '完成',
				filteredStaffList: [],
				searchValue:'',
			}
		},
		mounted() {
		},
		onLoad(options) {
			// 上次选过的数据
			var leader = JSON.parse(decodeURIComponent(options.leader));
			if(leader.id){
				this.leader = leader;
			}
			this.getStaffList();
		},
		methods: {
			// 回显勾选的人员
			selected(){
				if(this.leader.id){
					  let indexToDelete = this.staffList.findIndex(item => item.id === this.leader.id);
					  // 如果找到了具有特定id的元素
					  if (indexToDelete !== -1) {
						// 使用splice方法从数组中删除该元素
						this.staffList.splice(indexToDelete, 1);
					  }
					  this.leader.states = true;
					  this.staffList.unshift(this.leader);
				  
					  uni.setStorageSync("leader", this.leader);
				}
				  
			},
			// 点击确定，返回所有选中人信息
			confimButton(){
				// 如果没有负责人
				if(!this.leader.id){
					uni.showToast({
						title:"请选择负责人",
						icon:"error"
					})
					return;
				}
				var _this = this;
				uni.navigateBack({
				  delta: 1, // 返回到添加页面
				  success() {
					  uni.setStorageSync("leader", _this.leader);
				  },
				});
			},
			// 点击取消，清空选中
			cancelButton(){
				uni.navigateBack({
				  delta: 1, // 返回到添加页面
				});
			},
			// 获取所有人员
			getStaffList(){
				var _this = this;
				uni.request({
					url: common.api_base_url+'/staff' ,
					data:{
					},
					header:{
					},
					method: 'GET',
					success: res => {
						_this.staffList = res.data;
						_this.allStaff = res.data;
						if(_this.leader){
							_this.selected();
						}
					},
					fail: function(e) {
						uni.showToast({
							title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
							icon:"loading"
						})
					},
				});
			},
			//搜索框输入事件
			handleInput(e){
				this.searchText = e.detail.value
				this.searchText = this.searchText.trim(); // 去掉输入的前后空格
			  if (this.searchText === '') {
						// 如果输入为空，则显示全部数据
					this.staffList = this.allStaff;
				} else {
				
					this.filteredStaffList = this.staffList.filter(staff => {
						const staffName = staff.name.trim(); // 假设员工对象中有一个name属性
						return staffName.includes(this.searchText); // 检查员工名字是否包含输入的文本
					});
					this.staffList = this.filteredStaffList;
				}
			},
			//搜索事件
			handleSearch(e) {
				const searchValue = e.detail.value
				if (searchValue == '') {
					return
				}
				this.isShowSearchView = (searchValue !== '')
					for (const inItem of outItem.data) {
						if (inItem[this.formatValue].indexOf(searchValue) !== -1) {
							this.searchList.push(inItem)
						}
					}
			},
			//选择完成按钮点击事件
			handleSelectFinish(item) {
				if(item.states){
					item.states = false;
					this.leader = {};
				} else {
					this.leader.states = false;
					item.states = true;
					this.leader = item;
				}
				console.log(this.leader)
			}, 
		}
	}
</script>

<style scoped>
	
	.contact-item {
	  display: flex;
	  align-items: center;
	  padding: 10px; /* 调整间距，根据需要调整 */
	}
	
	.selection-box {
	  width: 20px; /* 框的宽度 */
	  height: 20px; /* 框的高度 */
	  border: 1px solid #000; /* 边框样式，可以根据需要修改 */
	  margin-right: 10px; /* 调整框与图片之间的间距，根据需要调整 */
	}
	
	.avatar {
	  width: 100rpx; /* 图片宽度，根据需要调整 */
	  height: 100rpx; /* 图片高度，根据需要调整 */
	  border-radius: 50%; /* 圆角效果，使图片成圆形 */
	}
	
	.contact-text {
	  flex: 1; /* 文本元素占据剩余空间，实现居中显示 */
	  font-size: 14px; /* 根据需要调整字体大小 */
	  margin-left: 10px;
	}
	
	/* 按钮样式 */
	.button-wrapper {
	  /* 使用 Flex 布局，水平排列，左右两边和中间各空出 5% 的距离 */
	  display: flex;
	  justify-content: space-between;
	  padding: 0 5%;
	  margin-top: 10px;
	}
	
	.confirm-button,
	.cancel-button {
	  /* 样式设置，根据需求调整 */
	  /* flex: 1; */
	  /* padding: 10px; */
	  border: 1px solid #007aff;
	  border-radius: 5px;
	  text-align: center;
	  font-size: 16px;
	  /* cursor: pointer; */
	  width: 500rpx;
	}
	
	.confirm-button {
	  /* 确定按钮样式，根据需求调整 */
	  background-color: #007aff;
	  color: #fff;
	}
	
	.cancel-button {
	  /* 取消按钮样式，根据需求调整 */
	  background-color: #fff;
	  color: #007aff;
	}
.search-container {
    display: flex;
    align-items: center;
}

.cuIcon-search {
    margin-right: 10px; /* 调整图标与输入框之间的距离 */
    color: #999; /* 设置图标的颜色 */
}

</style>